<style scoped>
    .login {
        width: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        text-align: center;
        background:url("../images/back.jpg") no-repeat;
        background-size:100% 100%;
    }

    .login h1 img {
        width: 320px;
        min-width: 300px;
        height: 40%;
    }

    .login Form {
        color: #666;
        max-width: 320px;
        background: #f9fafc;
        padding:15px 0px 1px;
        margin: 0px auto;
        border-radius: 10px;
        opacity: 0.8;
        min-width: 300px;
    }

    .login .ivu-row-flex {
        height: 100%;
    }
</style>
<template>
    <transition >
    <div class="login">
        <Row type="flex" justify="center" align="middle">
            <Col span="24">
                <h1>
                    <img src="../images/logo1.png">
                </h1>
                <Form ref="formInline" :model="formInline" :rules="ruleInline">
                    <h3>欢迎登录</h3>
                    <FormItem prop="username" style="margin: 0 auto; width: 260px;padding-top: 20px;">
                        <Input type="text" v-model="formInline.username" placeholder="请输入用户名" @blur="changeText()">
                        <Icon type="ios-person-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                    <FormItem prop="pwd" style="margin:0 auto; width: 260px;padding-top: 20px;">
                        <Input type="password" v-model="formInline.pwd" placeholder="请输入密码" @blur="changeText()">
                        <Icon type="ios-locked-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                    <FormItem style="padding-top: 20px;margin-bottom: 20px;">
                        <Button type="primary"  :loading="loading" @click="handleSubmit('formInline')">
                            <span v-if="!loading">登&nbsp;&nbsp;&nbsp;录</span>
                            <span v-else>Loading...</span>
                        </Button>
                    </FormItem>
                </Form>
            </Col>
        </Row>
    </div>
    </transition>
</template>
<script>
    import util from '../libs/util';
    export default {
        data () {
            return {
                loading: false,
                formInline: {
                    username: '',
                    pwd: ''
                },
                ruleInline: {
                    username: [
                        { required: true, message: '请填写用户名', trigger: 'blur' }
                    ],
                    pwd: [
                        { required: true, message: '请填写密码', trigger: 'blur' },
                        { type: 'string', min: 2, message: '密码长度不能小于6位', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    this.loading = true;
                    if (valid) {
                        localStorage.removeItem("token");
                        util.ajax.get('/login',{params: this.formInline}).then(res=>{
                            localStorage.setItem("token",res.data);
                            this.$router.push('/home');
                        }).catch(err=>{this.loading=false;});
                    } else {
                        this.loading = false;
                    }
                });
            },
            changeText(){
                console.log(this.loading);
                this.loading = false;
            }
        }
    };
</script>